/**
 * 用于实现图片懒加载的功能。当图片元素进入视口时，
 * 将图片的真实地址绑定到src属性上，从而实现图片的加载。
 * 在需要进行图片懒加载的图片元素上使用v-lazyload指令，
 * 并把图片的真实地址作为指令的值绑定到元素上
 * 
 * 用法：
 * <img v-lazyload="url" />
 */
let lazyload = {
  inserted: function (el, binding) {
    const options = {
      rootMargin: '0px',
      threshold: 0.1
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = binding.value;
          observer.unobserve(img);
        }
      });
    }, options);
    observer.observe(el);
  }
}

const install = function (Vue) {
  Vue.directive('lazyload', lazyload)
}

if (window.Vue) {
  window['lazyload'] = lazyload
  Vue.use(install);
}

lazyload.install = install
export default lazyload